<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="css/DrawBoxPanel.css">
  <!-- ResizeObserver polyfill -->
  <script src="js/ResizeObserver.js"></script>
  <script src="js/DrawBoxPanel.js"></script>
  <!-- jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <title>篆刻拼字 demo</title>
</head>

<body>
  <div class="content z-depth-3 row">
    <div id="component-zone" class="col s4">
      <div id="adding-container" class="row" style="padding-right:20px;">
        <div class="input-field col s10" style="margin-bottom:0;">
          <input id="component-name" type="text" onkeydown="if (event.keyCode === 13) addComponent(true);">
          <label for="component-name">部件名</label>
          <span id="component-helper" class="helper-text" data-error="没有该部件"></span>
        </div>
        <div class="col s2">
          <a class="btn-floating btn-small waves-effect waves-light grey darken-2" style="margin-top:25px;" href="javascript:addComponent();">
            <i class="material-icons">add</i>
          </a>
        </div>
      </div>
      <div id="paper-separator"></div>
      <div id="list-container" class="row">
        <ul id="component-list" class="collection"></ul>
      </div>
<script>
// Check if the character is Han
function isHan(char) {
  var c = char.charCodeAt(0);
  return c >= 0x4E00 && c <= 0x9FFF ||
    c >= 0x3400 && c <= 0x4DBF ||
    c >= 0x20000 && c <= 0x2A6DF ||
    c >= 0x2A700 && c <= 0x2B73F ||
    c >= 0x2B740 && c <= 0x2B81F ||
    c >= 0x2B820 && c <= 0x2CEAF ||
    c >= 0xF900 && c <= 0xFAFF ||
    c >= 0x2F800 && c <= 0x2FA1F;
}

function addComponent(fromKeyboard, forceVal, x1, y1, x2, y2) {
  var template = '<li class="collection-item"><div>CONTENT<a href="javascript:void(0);" onclick="removeComponent(this)" class="secondary-content"><i class="material-icons grey-text waves-effect">delete</i></a></div></li>';
  var textInput = $('#component-name');
  var label = $('label[for=component-name]');
  var val = forceVal || textInput.val();
  var helper = $('#component-helper');
  var list = $('#component-list');
  var characters = val.split('').filter(isHan);
  if (characters.length <= 0) {
    helper.attr('data-error', '没有输入汉字');
    textInput.addClass('invalid');
  } 
  for (var i in characters) {
    var character = characters[i];
    if (availableComponents.indexOf(character) < 0) {
      M.toast({ html: '没有部件“' + character + '”' });
    } else { // Add to the list
      textInput.removeClass('invalid');
      textInput.val('');
      if (!fromKeyboard) label.removeClass('active');
      list.append(template.replace('CONTENT', character));
      // Modify the panel
      currentComponents.push(character);
      // TODO: This line to be modified
      panel.addBox(x1||50, y1||50, x2||205, y2||205);
    }
    if(fromKeyboard) updateBoxBG();
  }
}

function removeComponent(el) {
  var aEls = $('#component-list .collection-item a.secondary-content');
  var index = aEls.index(el);
  var toRemove = $($('#component-list .collection-item')[index]);
  toRemove.animate({ height: 0, lineHeight: 0, opacity: 0 }, 400, function () {
    toRemove.remove();
    // Modify the panel
    currentComponents.splice(index, 1);
    panel.removeBox(index);
    updateBoxBG();
  });
}
</script>
    </div>
    <div id="preview-zone" class="col s8 preview-zone">
      <div id="panel-wrapper" class="card">
<script>
$('#panel-wrapper').hover(
  function () { $('#panel-wrapper').addClass('z-depth-2'); },
  function () { $('#panel-wrapper').removeClass('z-depth-2'); }
);
</script>
      <div id="panel-container"></div>
      </div>
      <div id="ops-bar">
        <a id="layout-button" class="waves-effect btn white black-text" href="javascript:autoLayout()"><i class="material-icons left">view_comfy</i>布局</a>
        <a id="download-button" class="waves-effect waves-light btn" href="javascript:void(0);" download="seal.png"><i class="material-icons left">file_download</i>下载</a>
      </div>
    </div>
  </div>
</body>
<!-- Materialize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// The DrawBoxPanel
var panel;
// All available components, a list of strings
var availableComponents;
var getAvailableComponents = $.getJSON('available-components.json',
  function (val) { availableComponents = val; });
// Components added
var currentComponents = [];
var panelDimension = 512;

function toRequestExpression() {
  var result = '';
  for (var i = 0; i < panel.nBoxes(); i++) {
    var minMax = panel.getMinMax(i);
    var unicodeHex = currentComponents[i].charCodeAt(0).toString(16);
    result += '@' + [ unicodeHex,
      minMax[1], minMax[0], minMax[3], minMax[2] ];
  }
  return result;
}

function updateBoxBG() {
  var imgURL = 'compose/' + toRequestExpression();
  $('#download-button').attr('href', imgURL);
  $.get(imgURL).then(function () {
    var bgImageStr = 'url(' + imgURL + ')';
    panel.container.style.backgroundImage = bgImageStr;
  });
}

function autoLayout() {
  var margin = 5, w = h = panelDimension;
  switch (panel.nBoxes()) {
    case 1: {
      panel.setBox(0, margin, margin, w - margin, h - margin );
    }; break;
    case 2: {
      panel.setBox(0, w/2 + margin, margin, w - margin, h - margin );
      panel.setBox(1, margin, margin, w/2 - margin, h - margin );
    }; break;
    case 3: {
      panel.setBox(0, w/2 + margin, margin, w - margin, h - margin );
      panel.setBox(1, margin, margin, w/2 - margin, h/2 - margin );
      panel.setBox(2, margin, h/2 + margin, w/2 - margin, h - margin );
    }; break;
    case 4: {
      panel.setBox(0, w/2 + margin, margin, w - margin, h/2 - margin );
      panel.setBox(1, w/2 + margin, h/2 + margin, w - margin, h - margin );
      panel.setBox(2, margin, margin, w/2 - margin, h/2 - margin );
      panel.setBox(3, margin, h/2 + margin, w/2 - margin, h - margin );
    }; break;
    default: M.toast({ html: '字数无法自动布局' });
  }
  updateBoxBG();
}

window.onload = function () {
  panel = new DrawBoxPanel('panel-container', 
    { w: panelDimension, h: panelDimension });
  panel.container.addEventListener('boxmouseup', function () {
    updateBoxBG();
  });
  getAvailableComponents.then(function () {
    addComponent(false, '吾');
    addComponent(false, '心');
    addComponent(false, '寄');
    addComponent(false, '之');
    autoLayout();
  });
};
</script>
<style>
body {
  height: 100vh;
  background-image: url(img/bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow-y: hidden;
  font-family: Roboto, "Myriad Pro", "Segoe UI", -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; }
}

.content {
  position: relative; overflow: hidden;
  top: 10vh;
  margin: auto;
  width: 800px; height: 500px;
  border-radius: 10px;
}

#component-zone {
  height: 100%;
  border-radius: 10px 0 0 10px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
}

#adding-container {
  height: 100px;
  padding: 8px;
  margin-top: 0; margin-bottom: 0;
  border-radius: 10px 0 0 0;
  background-color: rgba(255, 255, 255, 0.25);
}
#paper-separator {
  height: 10px;
  background: radial-gradient(ellipse at 25% 0%, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 25%), radial-gradient(ellipse at 70% 0%, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 35%);
  box-shadow: inset 0 7px 5px -10px #000000AA;
}
#list-container {
  height: 390px;
  overflow: auto;
  margin-top: 0;
  margin-bottom: 0;
}
#list-container .collection {
  border: none;
}
#list-container .collection-item {
  background-color: rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.5s;
  animation: fadein 0.4s;
}
#list-container .collection-item:last-child {
  border-bottom: none;
}
#list-container .collection-item:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

#preview-zone {
  background: white;
  border-radius: 0 10px 10px 0;
  height: 100%;
}

#panel-wrapper {
  width: 255px; height: 255px;
  margin: 80px auto;
}
#panel-container {
  width: 255px; height: 255px;
  box-shadow: black;
}

#ops-bar {
  text-align: center;
}
</style>
</html>
